<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css 无宽度布局实践</title>
<link rel="stylesheet" href="ui.css" />
<style type="text/css">
/*position:absolute; 写法 必须制定最小高度
	a,img{ border:none;}
	.wrap{background:#f8f8f8; barder:1px solid #ccc; padding:10px; *zoom:1;}
		.avatar{position:absolute;}
		.avatar:hover{-webkit-box-shadow:0 0 4px #FC0;}
		.avatar,.avatar img{-webkit-border-radius:5px;}
		.info{ padding-left:110px; min-height:100px; *height:100px;}
/*/
/* float:left; 比较好的方案
	a,img{ border:none;}
	.wrap{background:#f8f8f8; barder:1px solid #ccc; padding:10px;*zoom:1;}
		.avatar{ float:left; display:block;}
		.avatar:hover{-webkit-box-shadow:0 0 4px #FC0;}
		.avatar,.avatar img{-webkit-border-radius:5px;}
		.info{padding-left:110px;min-height:100px;}
/*/
/*display:table-cell; 最简洁 ie 6 不支持*/
	a,img{ border:none;}
	.wrap{background:#f8f8f8; barder:1px solid #ccc; padding:10px; }
	.avatar + .info{ width:100%;}
		.avatar{display:table-cell;vertical-align:top;*float:left;}
		.avatar:hover{-webkit-box-shadow:0 0 4px #FC0;}
		.avatar,.avatar img{-webkit-border-radius:5px;}
		.info{display:table-cell;padding-left:10px;min-height:100px;}
		/**/
		
</style>
</head>

<body>
<div class="wrap">
	<a href="#" class="avatar"><Img src="http://test.daxuecheng.com/FDGIMG1/M00/39/98/0hYOmEzekW4AAAAAAAMGRmZI-t8543_h.png" /></a>
    <div class="info"><a href="#" style="float:right;">right</a>#腾讯VS360#没今天却在互联网上#腾讯VS360#没今天却在互联网上#腾讯VS360#没今天却在互联网上#腾讯VS360#没今天却在互联网上</div>
</div>
<div style="display:inline-block;">下面的文字</div>
<div style="display:inline-block;">下面的文字</div>

<div class="box">
<h1>两列其一自适应最佳实践</h1>

<pre>
/*position:absolute; 写法 必须制定最小高度
	a,img{ border:none;}
	.wrap{background:#f8f8f8; barder:1px solid #ccc; padding:10px; *zoom:1;}
		.avatar{position:absolute;}
		.avatar:hover{-webkit-box-shadow:0 0 4px #FC0;}
		.avatar,.avatar img{-webkit-border-radius:5px;}
		.info{ padding-left:110px; min-height:100px; *height:100px;}

*/

/* float:left; 比较好的方案 兼容最好
	a,img{ border:none;}
	.wrap{background:#f8f8f8; barder:1px solid #ccc; padding:10px;*zoom:1;}
		.avatar{ float:left; display:block;}
		.avatar:hover{-webkit-box-shadow:0 0 4px #FC0;}
		.avatar,.avatar img{-webkit-border-radius:5px;}
		.info{padding-left:110px;min-height:100px;}
/*/


/*display:table-cell; 最简洁 ie 6 不支持*/
	a,img{ border:none;}
	.wrap{background:#f8f8f8; barder:1px solid #ccc; padding:10px; }
	.avatar + .info{ width:100%;}
		.avatar{display:table-cell;vertical-align:top;*float:left;}
		.avatar:hover{-webkit-box-shadow:0 0 4px #FC0;}
		.avatar,.avatar img{-webkit-border-radius:5px;}
		.info{display:table-cell;padding-left:10px;min-height:100px;}
		/**/
</pre>
</div>
</body>
</html>
